Dashboard

<div class="row">
  <div class="col-xs-6">
    <div class="panel">
      <div class="panel-body">
        <bar-chart id="bar-chart-1" />
      </div>
    </div>
  </div>
  <div class="col-xs-6">
    <div class="panel">
      <div class="panel-body">
        <bar-chart id="bar-chart-new-symbol" />
      </div>
    </div>
  </div>
</div>

let bar = {
  data: [
    {
      label: "Bar 1",
      color: '#27B6B0',
      bars: {
        barWidth: 0.2,
        order: 1
      },
      data: [[1, 1750], [2, 750], [3, 432], [4, -300]]
    }, {
      label: "Bar 2",
      color: '#BAC3D2',
      bars: {
        barWidth: 0.2,
        order: 2
      },
      data: [[1, 1850], [2, 600], [3, 400], [4, -200]]
    }
  ],
  ticks: [[1, '3012'], [2, '2051'], [3, '3015'], [4, '3012']],
  min: 0,
  max: 5
};

let barNewSymbol = {
  symbol: "€",
  data: [
    {
      label: "Bar 1",
      color: '#27B6B0',
      bars: {
        barWidth: 0.2,
        order: 1
      },
      data: [[1, 1750], [2, 750], [3, 432], [4, -300]]
    }, {
      label: "Bar 2",
      color: '#BAC3D2',
      bars: {
        barWidth: 0.2,
        order: 2
      },
      data: [[1, 1850], [2, 600], [3, 400], [4, -200]]
    }
  ],
  ticks: [[1, '3012'], [2, '2051'], [3, '3015'], [4, '3012']],
  min: 0,
  max: 5
};

riot.mount('#bar-chart-1', bar);
riot.mount('#bar-chart-new-symbol', barNewSymbol);

<div class="row">
  <div class="col-xs-4">
    <div class="panel">
      <div class="panel-body">
        <dashboard-kpi icon="fa-shopping-cart" title="Intäkter" amount="3" />
      </div>
    </div>
  </div>
  <div class="col-xs-4">
    <div class="panel">
      <div class="panel-body">
        <dashboard-kpi icon="fa-shopping-cart" title="Intäkter" amount="3" />
      </div>
    </div>
  </div>
  <div class="col-xs-4">
    <div class="panel">
      <div class="panel-body">
        <dashboard-kpi icon="fa-shopping-cart" title="Intäkter" amount="3" />
      </div>
    </div>
  </div>
</div>

riot.mount('dashboard-kpi');

<div class="panel">
  <div class="panel-body">
    <donut-chart period="Dec 2015" amount="7 076'" title="Intäkter"></donut-chart>
  </div>
</div>

let data = [
  {
    label: 'Försäljning inom Sverige',
    data: 1607795,
    color: 'rgba(39,182,176,1)',
    icon: 'fa-shopping-cart'
  }, {
    label: 'Försäljning VMB och omvänd moms',
    data: 1270018,
    color: 'rgba(39,182,176,.8)',
    icon: 'fa-cart-plus'
  }, {
    label: 'Försäljning av varor utanför Sverige',
    data: 1083585,
    color: 'rgba(39,182,176,.6)',
    icon: 'fa-shopping-basket'
  }, {
    label: 'Försäljning av tjänster utanför Sverige',
    data: 75540,
    color: 'rgba(39,182,176,.4)',
    icon: 'fa-cogs'
  }, {
    label: 'Försäljning, egna uttag',
    data: 48000,
    color: 'rgba(39,182,176,.3)',
    icon: 'fa-credit-card'
  }, {
    label: 'Fakturerade kostnader',
    data: 0,
    color: 'rgba(39,182,176,.2)',
    icon: 'fa-file-text-o'
  }, {
    label: 'Intäktskorrigeringar',
    data: -12,
    color: 'rgba(39,182,176,.2)',
    icon: 'fa-usd'
  }
];

riot.mount('donut-chart', {data: data});

<div class="row">
  <div class="col-xs-3">
    <div class="panel">
      <div class="panel-body">
        <kpi-trend id="incometrend" icon="fa-shopping-cart" title="Omsättning 2016" amount="7 076'"></kpi-trend>
      </div>
    </div>
  </div>
  <div class="col-xs-3">
    <div class="panel">
      <div class="panel-body">
        <kpi-trend id="incometrend" icon="fa-shopping-cart" title="Omsättning 2016" amount="7 076'"></kpi-trend>
      </div>
    </div>
  </div>
  <div class="col-xs-3">
    <div class="panel">
      <div class="panel-body">
        <kpi-trend id="incometrend" icon="fa-shopping-cart" title="Omsättning 2016" amount="7 076'"></kpi-trend>
      </div>
    </div>
  </div>
  <div class="col-xs-3">
    <div class="panel">
      <div class="panel-body">
        <kpi-trend id="incometrend" icon="fa-shopping-cart" title="Omsättning 2016" amount="7 076'"></kpi-trend>
      </div>
    </div>
  </div>
</div>

let income = {
  data: [
    {
      label: 'Resultat',
      color: '#27B6B0',
      lines: {
        show: true,
        fill: true
      },
      points: {
        show: false
      },
      data: [[1, 541], [2, 507], [3, 1602], [4, 276], [5, 1533], [6, 93], [7, 1242], [8, 450], [9, 581], [10, 2034], [11, 1021], [12, 440]]
    }
  ],
  ticks: [[1, 'mar'], [2, 'apr'], [3, 'maj'], [4, 'jun'], [5, 'jul'], [6, 'aug'], [7, 'sep'], [8, 'okt'], [9, 'nov'], [10, 'dec'], [11, 'jan'], [12, 'feb'], [13, 'mar']]
};

riot.mount('kpi-trend', income);

<div class="row">
  <div class="col-xs-4">
    <div class="panel">
      <div class="panel-body">
        <kpi-widget/>
      </div>
    </div>
  </div>
  <div class="col-xs-4">
    <div class="panel">
      <div class="panel-body">
        <kpi-widget/>
      </div>
    </div>
  </div>
  <div class="col-xs-4">
    <div class="panel">
      <div class="panel-body">
        <kpi-widget/>
      </div>
    </div>
  </div>
</div>

this.mixin('jquery')
let data = {
    title: "Inkomst",
    icon: "fa-shopping-cart",
    amount: "356'",
    smoothen: true, //makes the lines smoother
    data: [{
        color: '#27B6B0',
        lines: {
            show: true,
            fill: true
        },
        points: {
            show: false
        },
        data: [[1, 541], [2, 507], [3, 1602], [4, 276], [5, 1533], [6, 93], [7, 1242], [8, 450], [9, 581], [10, 2034], [11, 1021], [12, 440]]
    }],
    ticks: [[1, 'mar'], [2, 'apr'], [3, 'maj'], [4, 'jun'], [5, 'jul'], [6, 'aug'], [7, 'sep'], [8, 'okt'], [9, 'nov'], [10, 'dec'], [11, 'jan'], [12, 'feb'], [13, 'mar']]
};
riot.mount('kpi-widget');

<line-chart></line-chart>

let data = {
  data: {
    label: 'Resultat',
    color: '#27B6B0',
    lightenFromPoint: 9, //null will give no lightened points
    smoothen: true,
    lines: {
      show: true,
      fill: true
    },
    points: {
      show: true
    },
    data: [[1, -541], [2, -507], [3, 1602], [4, -276], [5, -1533], [6, 93], [7, 1242], [8, -450], [9, -581], [10, -2034], [11, -1021], [12, 440]]
  },
  ticks: [[1, 'mar'], [2, 'apr'], [3, 'maj'], [4, 'jun'], [5, 'jul'], [6, 'aug'], [7, 'sep'], [8, 'okt'], [9, 'nov'], [10, 'dec'], [11, 'jan'], [12, 'feb'], [13, 'mar']]
};
riot.mount('line-chart', data);

<twosided-bar-chart/>

let bar = {
  posData: {
    color: '#27B6B0',
    data: [
      [["Mattias Ost", 1000], ["McDonken", 750], ["Ugglor", 750]],
      [["erikssons elektriska fotbojspoleringsföretag", 750]],
      [],
      [["Jens Flens", 300]],
      [["Ugglor", 1000], ["Billiga barnrumpor", 1750]],
      [["Skroten", 750]],
      [["Henriks hangarfartyg", 432]],
      [["Pontus kokaina", 200], ["McDonken", 100]],
      [["Kebabens mamma", 1000], ["yoheios Frisyr AB", 750]],
      [["DcMonken", 750]]
    ]
  },
  negData: {
    color: '#C01583',
    data: [
      [["Mattias Ost", -1000], ["McDonken", -750]],
      [["McDonken", -750]],
      [],
      [["Jens Flens", -300]],
      [["Ugglor", -1000], ["Billiga barnrumpor", -1750]],
      [["Skroten", -750]],
      [["Henriks hangarfartyg", -432]],
      [["Pontus kokaina", -200], ["McDonken", -100]],
      [["Kebabens mamma", -1000], ["yoheios Frisyr AB", -750]],
      [["DcMonken", -750]]
    ]
  },
  barWidth?: .2, //default .1
  ticks: [[1, '1 jan'], [2, '2 jan'], [3, '3 jan'], [4, '4 jan'],[5, '5 jan'], [6, '6 jan'], [7, '7 jan'], [8, '8 jan'],[9, '9 jan'], [10, '10 jan']],
  clickEventFunction: clickEventFunction(data, chartName),
  hoverEventFunction: hoverEventFunction(data, chartName)
};
riot.mount('twosided-bar-chart', options);